<template lang="html">
  <el-container>
  <el-header style='font-size:30px'>
    {{ currentTitle }}

  </el-header>
  <el-container>
    <el-aside width="200px" style="background-color: rgb(255, 255, 255)">
      <el-menu :default-openeds="['friendChat']">
        <el-menu-item index="commonChat" @click="switchChatObject(0)" v-bind:class='currentTitle=="聊天室"?"is-active":""'>
        <i class="iconfont icon-icproject"></i>
        <span slot="title">聊天室</span>
      </el-menu-item>
      <el-submenu index="friendChat">
        <template slot="title">
          <i class="iconfont icon-icoperation"></i>
          <span slot="title">我的好友</span>
        </template>
        <!-- 这里循环遍历好友  -->
        <el-menu-item index="operation/test" @click="switchChatObject(1)"  v-for="(friend, index) in friendList" :key ='index'>
          <i class="fa fa-list-alt" ></i> {{ friend.name?friend.name:'未取名' }}
        </el-menu-item>
        <!-- 这里循环遍历好友  -->
    </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-main style="height:70%" id='monitor'>

        <div class="msg" v-for='(item,index) in msg' >
         <div class="user_info">
           <div class="user_info_left">
             <div class="head_pic">
               <img v-bind:src='item.head_pic?item.head_pic:""'  />
             </div>
             <span>
              {{ item.name?item.name:'未取名' }}
              <button @click="privateChat(item)">发起聊天</button>
             </span>
           </div>
           <div class="content">
            {{ item.msg?item.msg:'' }}
           </div>
         </div>
        </div>

      </el-main>
      <el-footer style="height:30%">
        <textarea
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
          v-on:keyup.13="sendMsg"
          id ='msgInput'>
        </textarea>

        <el-button v-on:click='sendMsg'>提交</el-button>

      </el-footer>
    </el-container>
  </el-container>
  <el-footer style='background-color: #C0C0C0' >
    <!-- 底部 -->
  </el-footer>
</el-container>
</template>

<script>
export default {
  data(){
    return{
      tableData: [],
      textarea: '',
      msg: [],
      currentTitle: '',
      currentChatObject: 0,
      friendList: this.$store.getters.friend_list,
    }
  },
  methods:{
    privateChat: function(item){
      var new_friend = {
        'fd': item.fd,
        'name': item.name,
        'head_pic': item.head_pic
      }
      this.$store.dispatch('user',new_friend)
    },
    sendMsg: function() {
      //校验输入参数是否合法
      if(this.textarea.length != 0 && this.textarea != '\n'){
        //通知monitor并且发送消息至服务器

        //组装json
        if(this.currentChatObject == 0){
          var msg = {
            'fd': 1,
            'msg': this.textarea,
            'type': 1001
          }
        }else{
          var msg = {
            'fd': 1,
            'msg': this.textarea,
            'type': this.currentChatObject
          }
        }
        var j = JSON.stringify(msg);
        console.log(j)



        this.threadPoxi(j)

        this.textarea = ''
      }else{
        this.textarea = ''
        this.$alert('清输入内容')
      }
      this.textarea = ''
      // console.log(this.$store.getters.new_msg)
    },
    switchChatObject: function(to){

      //修改聊天标题得同时修改数据源
      if(to === 0){
        this.currentTitle = '聊天室'
        this.currentChatObject = to
        this.msg = this.$store.getters.new_msg[0]
      }else{
        this.currentTitle = 'friend name'
        this.currentChatObject = to
        this.msg = this.$store.getters.new_msg[to]
      }
    }
    ,
    threadPoxi(mymessage){  // 实际调用的方法
        if(this.websock == null){
          this.websock = {
            "readyState": 0
          }
        }

        //参数
        const agentData = mymessage;
        //若是ws开启状态
        if (this.websock.readyState === this.websock.OPEN) {
            this.websocketsend(agentData)
        }
        // 若是 正在开启状态，则等待300毫秒
        else if (this.websock.readyState === this.websock.CONNECTING) {
            let that = this;//保存当前对象this
            setTimeout(function () {
                that.websocketsend(agentData)
            }, 300);
        }
        // 若未开启 ，则等待500毫秒
        else {
            this.initWebSocket();
            let that = this;//保存当前对象this
            setTimeout(function () {
                that.websocketsend(agentData)
            }, 500);
        }
    },
    initWebSocket(){ //初始化weosocket
        //ws地址
        const wsuri = "ws://118.89.39.203:9501";
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
    },
    websocketonmessage(e){ //数据接收
        // const redata = JSON.parse(e.data);
        // console.log(e)
        // 此处应该用emit
        console.log(e)
        //todo::有好友类型时 应对消息做分类处理
        var msg = JSON.parse(e.data);
        if(msg.type == 1001 || msg.type == 1000){
          this.$store.dispatch('msg',JSON.parse(e.data));
          if(typeof this.msg == 'undefined' && this.currentTitle == '聊天室'){
            this.msg = this.$store.getters.new_msg[0];
          }
        }

        if(msg.type == 1003){
          //校验本地fd是否与返回的fd一致
        }


        // console.log(this.$store.getters.new_msg)
    },
    websocketsend(agentData){//数据发送
        this.websock.send(agentData);
    },
    websocketclose(e){  //关闭
        console.log("connection closed (" + e.code + ")");
    }
  },
  created(){
    this.initWebSocket()
    this.switchChatObject(0)
  },
  updated(){
    this.$nextTick(function(){
      var container = document.getElementById('monitor')
       container.scrollTop = container.scrollHeight;
    })
  }
}
</script>

<style lang="css" scoped>
.el-container{
  height: 100%;
  width: 100%;
}
.el-footer{
  width: 100%;
  background-color: #eee;
}
.el-main{
  width: 100%;
  background-color: #eee;
  padding:20px;
}
#msgInput{
   resize:none;
}
.el-button{
  width: 100%;
  margin: 10px auto;
}
.monitor{
  font-family: Courier New!important;
  font-size: 12px!important;
  border: 1px solid #ccc;
  padding: 5px;
  overflow: auto;
  margin: 5px 0;
  color: #000;
  height: 500px;
  background-color: rgb(245,245,245);
  width: 100%;
}
.msg{
  font-family: Courier New!important;
  font-size: 12px!important;
  padding: 5px;
  overflow: auto;
  margin: 5px 0;
  color: #000;
  min-height: 50px;
  height: auto;
}
.user_info_left{
  float: left;
  margin: 0px 20px 0px 0px
}
.content{
  float:left;
  font-size: 15px;
  background-color: white;
  padding: 10px;
}
img{
  height: 40px;
  width: 40px;
}
textarea{
  width: 100%;
  height:60%;
}
.el-header{
  background-color: #C0C0C0
}
</style>
